<template>
  <div class="dashboard-container">
    <h2>仪表盘</h2>

    <!-- 图表区域 -->
    <div class="charts-container">
      <!-- 树状图 -->
      <div class="chart-box">
        <h3>组织结构树状图</h3>
        <div id="treeChart" style="width: 100%; height: 400px;"></div>
      </div>

      <!-- 水平柱状图 -->
      <div class="chart-box">
        <h3>商品销售情况</h3>
        <div id="barChart" style="width: 100%; height: 400px;"></div>
      </div>
    </div>

    <!-- 统计信息 -->
    <div class="stats-container">
      <el-card>
        <h3>统计数据</h3>
        <ul>
          <li>商品数量：{{ stats.productCount }} 个</li>
          <li>用户数量：{{ stats.userCount }} 人</li>
          <li>后台人员数量：{{ stats.adminCount }} 人</li>
        </ul>
      </el-card>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import controller from '@/api/controller';
export default {
  name: 'DashboardView',
  data() {
    return {
      stats: {
        productCount: 0,
        userCount: 0,
        adminCount: 0
      }
    };
  },
  mounted() {
    this.initTreeChart();
    this.initBarChart();
    this.fetchStatsData(); // 调用新方法获取数据
  },
  methods: {
    async fetchStatsData() {
      try {
        const res = await controller.getNumber();
        if (res && res.code === 200 && Array.isArray(res.data)) {
          this.stats.productCount = res.data[0] || 0;
          this.stats.userCount = res.data[1] || 0;
          this.stats.adminCount = res.data[2] || 0;
        } else {
          console.error('统计数据格式错误或为空');
        }
      } catch (error) {
        console.error('获取统计数据失败:', error);
        this.$message.error('无法加载统计数据，请检查网络');
      }
    },
    initTreeChart() {
      const chartDom = document.getElementById('treeChart');
      const myChart = echarts.init(chartDom);

      const option = {
        tooltip: { trigger: 'item', triggerOn: 'mousemove' },
        series: [
          {
            type: 'tree',
            data: [
              {
                name: '总部',
                children: [
                  {
                    name: '商品部',
                    value: 1
                  },
                  {
                    name: '用户部',
                    value: 2,
                    children: [
                      { name: '市场组', value: 1 },
                      { name: '运营组', value: 1 }
                    ]
                  },
                  {
                    name: '技术部',
                    value: 2
                  }
                ]
              }
            ],
            top: '1%',
            left: '7%',
            bottom: '1%',
            right: '20%',
            symbol: 'pin',
            symbolSize: 20,
            label: {
              position: 'left',
              verticalAlign: 'middle',
              align: 'right'
            },
            leaves: {
              label: {
                position: 'right',
                verticalAlign: 'middle',
                align: 'left'
              }
            },
            expandAndCollapse: true,
            animationDuration: 550
          }
        ]
      };

      myChart.setOption(option);
    },
    initBarChart() {
      const chartDom = document.getElementById('barChart');
      const myChart = echarts.init(chartDom);

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: ['苹果', '香蕉', '烤鸡', '鸭腿']
        },
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [50, 30, 15, 15],
            itemStyle: { color: '#409EFF' }
          }
        ]
      };

      myChart.setOption(option);
    }
  }
};
</script>

<style scoped lang="less">
.dashboard-container {
  padding: 20px;
}

.charts-container {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;

  .chart-box {
    flex: 1;
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }

  h3 {
    text-align: center;
    margin-bottom: 10px;
  }
}

.stats-container {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;

  ul {
    list-style: none;
    padding-left: 0;

    li {
      margin-bottom: 10px;
      font-size: 16px;
    }
  }
}
</style>